	(function ($) {
	'use strict';
	
	var NavBarItem = Backbone.View.extend({
		tagName: "span",
		className: "NavBarItem",
		events: {
			'click':'navBarItemClick'
		},
		template: _.template($_T.NavBarItem),
		initialize: function () {
		
			OKEvents.on('animateMove', this.animateMove, this);
		},
		render: function() {
			this.$el.html(this.template({item:this.model}));
			return this;
		},
		navBarItemClick:function(){
			var dayId = "Day_"+this.model.id;
			console.log($("#"+dayId).offset().left);
			var startLeft= $("#"+dayId).offset().left;
			console.log(startLeft);
			OKEvents.trigger('swapMoveTo', startLeft);
		},
		animateMove:function(fixLeft){
			var dayId = "Day_"+this.model.id;
			var swapDay = $("#"+dayId);
            var width = swapDay.width();
            var dayOffset = swapDay.offset().left;
            var sLeft = $("#SwapGroupOut").scrollLeft();
            var startLeft = sLeft + dayOffset;
            if(fixLeft >= startLeft && fixLeft <  (startLeft+width) ){
                OKEvents.trigger('TitleBarChange', this.model);
            }
		}
	});
	$_V.NavBarItem = NavBarItem;
})(jQuery);	